<template>
  <div>
    <a-modal v-model:visible="modalVisible" title="退款服务信息" width="80%" @cancel="cancle">
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="订单状态">{{ orderStatus(order.status) }}</a-descriptions-item>
        <a-descriptions-item label="订单号">
          {{ order.number }}
          <a-button type="link" @click="search">查看</a-button>
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">{{ order.createdAt }}</a-descriptions-item>
        <a-descriptions-item label="申请人">{{ order.name }}</a-descriptions-item>
        <a-descriptions-item label="申请退款金额">{{ order.price }}</a-descriptions-item>
        <a-descriptions-item label="实际退款金额">{{ order.endPrice }}</a-descriptions-item>
        <a-descriptions-item label="退款方式">{{ order.way }}</a-descriptions-item
        ><a-descriptions-item label=""></a-descriptions-item>
        <a-descriptions-item label="退款原因" style="width: 160px">{{ order.cause }}</a-descriptions-item>
      </a-descriptions>

      <template #footer>
        <div style="padding: 20px 0px">
          <a-row v-if="isEdit">
            <a-col :span="4" :offset="6"><a-button type="primary" @click="confirm">确认退款</a-button></a-col>
            <a-col :span="4" :offset="2"><a-button type="danger" @click="reject">拒绝退款</a-button></a-col>
          </a-row>
          <a-row v-else>
            <a-col :span="4" :offset="8">
              <a-button type="primary" @click="cancle">关闭</a-button>
            </a-col>
          </a-row>
        </div>
      </template>
    </a-modal>
    <!--拒绝退款弹窗 -->
    <a-modal v-if="visible1" v-model:visible="visible1" title="拒绝原因" @ok="rejectRefund" width="50%">
      <a-form :model="form" ref="formRef" :rules="rules">
        <a-form-item label="请输入退款原因" name="reason">
          <a-textarea v-model:value="form.reason" placeholder="请输入退款原因" :auto-size="{ minRows: 2, maxRows: 5 }" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 退款 -->
    <a-modal v-model:visible="visible2" title="确认退款吗？" width="50%" @cancel="closeRefund">
      <a-form :model="form" ref="formRef1" :rules="rules1">
        <a-form-item label="结束时间" name="date">
          <a-date-picker v-model:value="form.date" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" @change="changeDate" />
        </a-form-item>
      </a-form>

      <a-descriptions bordered :column="2" v-if="form.date">
        <a-descriptions-item label="申请退款金额">{{ refund.payPrice }}</a-descriptions-item>
        <a-descriptions-item label="超时天数">
          {{ Math.abs(refund.timeoutDays) }}
        </a-descriptions-item>
        <a-descriptions-item label="违约金">{{ refund.penalty }}</a-descriptions-item>
        <a-descriptions-item label="应退金额">{{ refund.endPrice }}</a-descriptions-item>
      </a-descriptions>

      <template #footer>
        <a-button type="primary" @click="confirm1(0)">退款</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { Modal, message } from 'ant-design-vue'
import { ref, h, reactive, onMounted, createVNode, toRefs, computed } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { ProcessCancelOrder, selectFreseniusRefundOrderDetail, confirmRefund } from '@/api/order/index'
import { useModal } from '@/hooks'
export default {
  components: {
    ExclamationCircleOutlined
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    number: {
      type: Number,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    status: {
      type: Boolean,
      default: ''
    }
  },
  setup(props, { emit, attrs }) {
    console.log(props, '接收的参数')
    const router = useRouter()
    const visible1 = ref(false)
    const form = reactive({})
    const formRef = ref('')
    const formRef1 = ref('')
    // const visible = ref(false)
    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })
    const data = reactive({
      order: {},
      refund: {},
      visible2: false,
      date: ''
    })
    const rules = {
      reason: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入退款原因！！！'
        }
      ]
    }
    const rules1 = {
      date: [
        {
          required: true,
          trigger: 'blur',
          message: '请选择结束时间'
        }
      ]
    }

    const cancle = () => {
      emit('closeModal')
    }
    const confirm = () => {
      data.visible2 = true
    }
    const closeRefund = () => {
      form.date = ''
      data.visible2 = false
    }
    const changeDate = async (date, dateString) => {
      formRef1.value.clearValidate()
      data.date = dateString
      let obj = {
        number: props.number,
        endTime: data.date
      }
      let res = await selectFreseniusRefundOrderDetail(obj)
      if (res.success) {
        data.refund = res.object
        // form.aiPuDiKangRefundDetail = ''
      }
      // form.endTime = dateString[1]
    }

    const confirm1 = val => {
      formRef1.value.validate().then(async () => {
        let obj = {
          number: props.number,
          status: 7,
          refundType: val,
          aiPuDiKangRefundDetail: '',
          endPrice: data.refund.endPrice
        }
        let res = await confirmRefund(obj)
        if (res.success) {
          message.success('退款成功')
          closeRefund()
          cancle()
        } else {
          message.error('退款失败')
        }
      })
    }

    const reject = () => {
      form.value = {}
      visible1.value = true
    }
    const handleOk = () => {
      visible1.value = false
    }
    const rejectRefund = () => {
      formRef.value.validate().then(async () => {
        let data = {
          content: form.reason,
          number: props.number,
          status: 10
        }
        let res = await ProcessCancelOrder(data)
        if (res.success) {
          message.success('拒绝退款成功')
          visible1.value = false
          cancle()
        } else {
          message.error('操作失败')
        }
      })
    }
    const orderStatus = status => {
      let title = ''
      switch (status) {
        case 9:
          title = '待审核'
          break
        case 7:
          title = '已退款'
          break
        case 10:
          title = '已拒绝'
          break
      }
      return title
    }
    const search = () => {
      emit('closeModal')
      router.push({
        path: '/order/center/order-detail',
        query: {
          isEdit: 0,
          number: data.order.number
        }
      })
    }
    initDetail()
    async function initDetail() {
      let obj = {
        number: props.number
      }
      let res = await selectFreseniusRefundOrderDetail(obj)
      if (res.success) {
        data.order = res.object
        form.aiPuDiKangRefundDetail = ''
      }
    }
    onMounted(() => {})
    return {
      ...toRefs(data),
      closeRefund,
      form,
      formRef,
      formRef1,
      cancle,
      confirm,
      confirm1,

      orderStatus,
      rules,
      rules1,
      reject,
      visible1,
      handleOk,
      rejectRefund,
      search,
      changeDate,
      modalVisible
    }
  }
}
</script>
